<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜锦晖旅行网</title>
    <style>
        *{margin: 0;padding: 0;}

        a{text-decoration: none;color: black;}

    /*   头部*/
        header{width: 100px;display: flex;}

        header>a{flex: 1;}

        header>a>img{width: 100%;}

    /*   主要内容*/
        main{
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
        }

        main>.item{
            width: 100%;
            height: 100px;
            margin-top: 10px;
            border-radius: 10px;
        /*    伸缩布局*/
            display: flex;
        }

        main>.item:nth-child(1){
            background-color: rgb(78,50,182);
        }
        main>.item:nth-child(2){
            background-color: rgb(31,153,209);
        }
        main>.item:nth-child(3){
            background-color: rgb(240,147,7);
        }
        main>.item:nth-child(4){
            background-color: rgb(187,19,131);
        }

        .item>.left{
            flex: 1;

        }

        .item>.right{
            flex: 2;
            /*伸缩布局*/
            display: flex;
            /*换行*/
            flex-wrap: wrap;
        }

        .item>.right>a{
            display: flex;
            /*居中*/
            justify-content: center;  /*主轴居中*/
            align-items: center; /*侧轴居中*/
            width: 50%;
            color: #fff;
            box-sizing: border-box;
            border-left: 1px solid #cccccc;
            border-bottom: 1px solid #cccccc;
        }

        .item>right>a:nth-last-child(-n+2){
            /*border-bottom: none;*/
        }


        .extra{
            width: 100%;
            display: flex;
        }

        .extra>a{
            flex: 1;
        }

        .extra>a>img{
            width: 100%;
        }
    /*   尾部*/
        footer{
            width: 100%;
        }

        footer> .nav{
            width: 100%;
            height: 30px;
            border-top: 1px solid #cccccc;
            border-bottom: 1px solid #cccccc;
            display: flex;
        }

        footer> .nav > a{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: hotpink;
        }

        footer> .link{
            text-align: center;
            margin: 5px 0;
        }

        footer> .link a{
            color: hotpink;
        }

        footer> .copyright{
            text-align: center;
            margin-bottom: 5px;
            color: #e7c3c3;
        }



    </style>
</head>
<body>
    <div class="container">
        <!--头部-->
        <a href="https://www.ctrip.com/?sid=155952&allianceid=4897&ouid=index">
            <img src="./images/banner.png" alt="">
        </a>
        <!--主要内容-->
        <main>
            <section class="item">
                <div class="left"></div>
                <div class="right">
                    <a href="">海外酒店</a>
                    <a href="">团购</a>
                    <a href="">特价机票</a>
                    <a href="">名宿客栈</a>
                </div>

            </section>
            <section class="item">
                <div class="left"></div>
                <div class="right">
                    <a href="">海外酒店</a>
                    <a href="">团购</a>
                    <a href="">特价机票</a>
                    <a href="">名宿客栈</a>
                </div>

            </section>
            <section class="item">
                <div class="left"></div>
                <div class="right">
                    <a href="">海外酒店</a>
                    <a href="">团购</a>
                    <a href="">特价机票</a>
                    <a href="">名宿客栈</a>
                </div>

            </section>
            <section class="item">
                <div class="left"></div>
                <div class="right">
                    <a href="">海外酒店</a>
                    <a href="">团购</a>
                    <a href="">特价机票</a>
                    <a href="">名宿客栈</a>
                </div>

            </section>
            <section class="extra">
                <a href=""><img src="./images/extra_1.jpg" alt=""></a>
                <a href=""><img src="./images/extra_2.jpg" alt=""></a>
            </section>
        </main>
        <!--尾部-->
        <footer>
            <div class="nav">
                <a href="">电话预定</a>
                <a href="">下载内容</a>
                <a href="">我的</a>
            </div>
            <p class="link">
                <a href="">网站地图</a>
                <a href="">English</a>
                <a href="">电脑版</a>
            </p>
            <p class="copyright">&copy;携程旅行</p>
        </footer>
    </div>
</body>
</html>